<template>
    <template v-if="isShow">
        <TabGrayBarCard v-for="(card, index) in cards" :key="index" @click="chooseIndex(index)" :title="card.title"
            :isMore="false" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab" :tabRight="card.tabRight"
            @onChange="changeTab" :grayCardList="card.grayCardList"
            :echartId="`myEChartsBar-${props.permi}-investPool-${index}`" :echartData="card.echartData" :lineText="''"
            :barText="'销售额'" :unitText="card.unitText" :updateText="card.updateText"
            v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
        </TabGrayBarCard>
    </template>
</template>

<script setup>
import TabGrayBarCard from '@/DbComponents/tabGrayBarCard'
import { toThousands, dateFormat } from '@/utils/number-util'
import dashBoardApi from '@/api/Manage/Business/dashBoard'
import { ref, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
// {
//     tabs: [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }],
//     curTab: '日',
//     tabRight: '',
//     grayCardList: [{ label: '当日', value: '', unit: '', color: '', des: '' }, { label: '当周日均', value: '', unit: '', color: '', des: '' }, { label: '同比上周', value: '', unit: '%', color: '', des: '' }],
//     unitText: '',
//     updateText: '',
//     echartData: {},
//     startDate: '',
//     endDate: '',
// }
let cards = ref([]) // 页面需要展示的数据
let curCardIndex = ref(0)
let dataType = ref('日')
const dataList = ref([]) // 接口拿到的数据
const getList = (code) => {
    dashBoardApi.queryInvestPoolApi({ biProjectCode: props.biProjectCode, timeType: dataType.value, dataTime: props.updateDate, muCode: code ? code : '' }).then((res) => {
        if (res.data.code == 200) {
            const grayCardListDay = [{ label: '当日', value: '', unit: '', color: '' }, { label: '当周日均', value: '', unit: '', color: '' }, { label: '环比上周', value: '', unit: '%', color: '' }]
            const grayCardListMonth = [{ label: '当月累计', value: '', unit: '', color: '' }, { label: '当月日均', value: '', unit: '', color: '' }, { label: '环比上月', value: '', unit: '%', color: '' }]
            const grayCardListYear = [{ label: '当年累计', value: '', unit: '', color: '' }, { label: '当年日均', value: '', unit: '', color: '' }, { label: '同比上年', value: '', unit: '%', color: '' }]
            const list = []
            code ? "" : dataList.value = res.data.data
            res.data.data.map((item, index) => {
                list.push({
                    title: item.muName,
                    tabs: [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }],
                    curTab: dataType.value,
                    tabRight: item.timeLab,
                    grayCardList: dataType.value == '日' ? JSON.parse(JSON.stringify(grayCardListDay)) : dataType.value == '月' ? JSON.parse(JSON.stringify(grayCardListMonth)) : dataType.value == '年' ? JSON.parse(JSON.stringify(grayCardListYear)) : [],
                    unitText: `单位：${item.valueUnit}`,
                    updateText: '',
                    echartData: item.saleChart,
                    startDate: dataType.value == '日' ? props.updateDate : dataType.value == '月' ? dateFormat(new Date(props.updateDate), 'YYYY-MM') + '-01' : dataType.value == '年' ? dateFormat(new Date(props.updateDate), 'YYYY') + '-01-01' : '',
                    endDate: props.updateDate,
                })
                list[index].grayCardList[0].value = toThousands(item.sale)
                list[index].grayCardList[1].value = toThousands(item.avgSale)
                list[index].grayCardList[2].value = item.yoyValue
            })
            code ? cards.value[curCardIndex.value] = list[0] : cards.value = list
            console.log('~~~')
            console.log(cards.value)
        }
    }).catch(err => {
        console.log(err)
    });
}
const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
}
let isClickTab = ref(false)
const changeTab = (value) => {
    dataType.value = value
    isClickTab.value = true
}
const chooseIndex = (index) => {
    curCardIndex.value = index
    cards.value[index].curTab = dataType.value
    if (isClickTab.value) {
        getList(dataList.value[index].muCode)
        isClickTab.value = false
    }
}

let isShow = ref(false)
const getShow = async () => {
    await dashBoardApi.queryInvestPooLabApi({ biProjectCode: props.biProjectCode }).then((res) => {
        if (res.data.code == 200) {
            isShow.value = res.data.data == 1 ? true : false
        }
    }).catch(err => {
        console.log(err)
    });
}
const init = async () => {
    await getShow()
    if (isShow.value) {
        getList('')
    }
}
init()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    init()
}, { deep: true });

</script>

<style scoped lang="scss"></style>
